<include file="Public:header" />

<div id="page-body">
    <div id="qan-breadcrumbs"><span><a href="{$_global.site_url}">{$Think.lang.home}</a></span>&gt;&nbsp;<span><a href="{:U('Category/index')}">{$Think.lang.all_categories}</a></span><notempty name="question.category_id">&gt;&nbsp;</notempty><span>{$question.breadcrumbs}</span>&gt;&nbsp;<span>{$question.status|get_question_status}</span></div>
    <div id="qan-content">
        <div id="qan-main">
            <div id="qan-question" class="container">
                <div id="user-{$question.poster_id}" class="profile">
                    <a href="{$question.poster_id|format_user_url=$question['poster_name']}"><img class="avatar" src="{$question.asker.email|get_avatar}" alt="{$question.poster_name}" /></a>
                    <span class="name"><a href="{$question.poster_id|format_user_url=$question['poster_name']}">{$question.poster_name}</a></span>
                    <div class="profile-card"></div>
                </div>
                <div class="qa-container">
                    <div class="hd">
                        <h2><eq name="question.is_locked" value="1">{$Think.lang.status_locked}</eq>{$question.status|get_question_status}</h2>
                        <a id="show-another" href="{:U('Question/showAnother',array('qid'=>$question['question_id']))}">{$Think.lang.show_another_question}</a>
                    </div>
                    <h1 class="subject">{$question.title|Input::forShow}</h1>
                    <div class="content">{$question.details|parse_markup=$question['markup_mode']}</div>
                    <if condition="$question['last_editor_id'] AND $_global['display_last_edited']">
                    <ul class="meta">
                    	<li>{$Think.lang.edited_by} <a href="{$question.last_editor_id|format_user_url=$question['last_editor_name']}">{$question.last_editor_name}</a></li>
                        <li> - <abbr title="{$question.last_edit_time|format_date}">{$question.last_edit_time|pretty_date}</abbr></li>
                    </ul>
                    </if>
                    <notempty name="question.tags">
                    <ul class="q-tags">
                        <volist name="question.tags" id="vo">
                        <li><a class="tag" href="{$vo.tag_id|format_tag_url=$vo['name']}" title="{$Think.lang.question_tag|sprintf=$vo['name']|Input::forShow}">{$vo.name}</a></li>
                        </volist>
                    </ul>
                    </notempty>
                    <ul class="meta">
                        <li>{$Think.lang.asked_by} <a href="{$question.poster_id|format_user_url=$question['poster_name']}">{$question.poster_name}</a></li>
                        <li> - <abbr title="{$question.create_time|format_date}">{$question.create_time|pretty_date}</abbr></li>
                        <in name="question.status" value="1,2">
                        <li> - <abbr title="{$question.expire_time|format_date}">{$question.expire_time|pretty_date='future'}</abbr></li>
                        </in>
                        <eq name="perms.admin_edit_question" value="1">
                        <li> - <a href="javascript:void(0)" onclick="editQuestionDialog('{$question.question_id}')">{$Think.lang.edit}</a></li>
                        </eq>
                        <eq name="perms.admin_delete_question" value="1">
                        <li> - <a href="{:U('Question/delete',array('qid'=>$question['question_id']))}">{$Think.lang.delete}</a></li>
                        </eq>
                        <if condition="$perms['allow_report'] AND $_user['user_id'] neq $question['poster_id']">
                        <li class="report-abuse"> - <a href="javascript:void(0)" onclick="reportDialog('{$question.question_id}','Q')">{$Think.lang.report_abuse}</a></li>
                        </if>
                    </ul>
                </div>
            </div>
        </div>
        <ul id="qan-question-tools">
            <li id="label">{$Think.lang.action_bar}:</li>
            <li id="starthis">
                <a href="javascript:void(0)" title="{$Think.lang.action_bar_star_tips}" <eq name="perms.allow_star_question" value="1">onclick="starQuestion(this,'{$question.question_id}')"</eq>>
                    <span id="star-count" class="star-count">{$question.star_count}</span>
                    <eq name="perms.allow_star_question" value="1"><span class="star"></span><else/><span class="star-disabled"></span></eq>
                    {$Think.lang.action_bar_star}
                </a>
            </li>
            <eq name="perms.allow_email_question" value="1">
            <li id="mail-friend"><a href="javascript:void(0)" onclick="shareQuestionDialog('{$question.question_id}')" title="{$Think.lang.action_bar_email_tips}">{$Think.lang.action_bar_email}</a></li>
            </eq>
            <eq name="_global.comment_on_question_enable" value="1">
            <li id="comment-link"><a href="javascript:void(0)" onclick="loadComments('{$question.question_id}','Q')"><span>{$Think.lang.action_bar_comment} ({$question.comment_count})</span></a></li>
            </eq>
            <if condition="($question['poster_id'] eq $_user['user_id']) AND ($question['status'] eq 1)">
            <li id="edit-question" class="menu">
                <a href="javascript:void(0)"><span>{$Think.lang.action_bar_edit}</span></a>
                <ul id="edit-question-menu">
                    <eq name="perms.allow_add_details" value="1">
                    <li><a href="javascript:void(0)" onclick="addDetailsDialog('{$question.question_id}')">{$Think.lang.action_add_details}</a></li>
                    </eq>
                    <eq name="perms.allow_put_to_vote" value="1">
                    <li><a href="{:U('Question/putToVote',array('qid'=>$question['question_id']))}">{$Think.lang.action_put_to_vote}</a></li>
                    </eq>
                    <eq name="perms.allow_extend_expiration" value="1">
                    <li><a href="{:U('Question/extendExpiration',array('qid'=>$question['question_id']))}">{$Think.lang.action_extend_expiration}</a></li>
                    </eq>
                    <eq name="perms.allow_edit_question" value="1">
                    <li><a href="javascript:void(0)" onclick="editQuestionDialog('{$question.question_id}')">{$Think.lang.action_edit_question}</a></li>
                    </eq>
                    <eq name="perms.allow_delete_question" value="1">
                    <li><a href="{:U('Question/delete',array('qid'=>$question['question_id']))}">{$Think.lang.action_delete_question}</a></li>
                    </eq>
                    <eq name="question.new_answer_alert" value="1">
                    <li class="last"><a href="{:U('Question/switchAnswerAlert',array('qid'=>$question['question_id'],'status'=>'0'))}">{$Think.lang.action_disable_answer_alert}</a></li>
                    <else/>
                    <li class="last"><a href="{:U('Question/switchAnswerAlert',array('qid'=>$question['question_id'],'status'=>'1'))}">{$Think.lang.action_enable_answer_alert}</a></li>
                    </eq>
                </ul>
            </li>
            </if>
            <eq name="perms.allow_follow_question" value="1">
            <li id="follow-question">
                <a href="javascript:void(0)" onclick="followQuestion('{$question.question_id}')">{$Think.lang.action_bar_follow}</a>
            </li>
            </eq>
        </ul>

        <!-- begin of question comments --->
        <div id="q-comments" class="q-comments"></div>

        <!--begin of answers -->
        <div id="qan-answers">
            <div class="hd">
                <h3><strong>{$Think.lang.answer_count}</strong> ({$question.answer_count})</h3>
                <div class="qan-sort">
                    <ul>
                        <li class="first <eq name="sort" value="-1">active descending</eq>"><a href="{:U('Question/details',array('qid'=>$question['question_id'],'sort'=>-1))}">{$Think.lang.sortby_date_desc}</a></li>
                        <li class="<eq name="sort" value="1">active ascending</eq>"><a href="{:U('Question/details',array('qid'=>$question['question_id'],'sort'=>1))}">{$Think.lang.sortby_date_asc}</a></li>
                        <li class="<eq name="sort" value="-2">active descending</eq>"><a href="{:U('Question/details',array('qid'=>$question['question_id'],'sort'=>-2))}">{$Think.lang.sortby_rate_count_desc}</a></li>
                        <li class="<eq name="sort" value="2">active ascending</eq>"><a href="{:U('Question/details',array('qid'=>$question['question_id'],'sort'=>2))}">{$Think.lang.sortby_rate_count_asc}</a></li>
                    </ul>
                </div>
            </div>
            
            <if condition="($question['answer_count'] eq 0) AND ($question['status'] neq 0)">
            <p class="no-answer">{$Think.lang.no_answers}</p>
            </if>
            
            <if condition="$perms['allow_answer'] AND ($myAnswerCount gt 0)">
            <p><input class="btn" type="button" value="{$Think.lang.add_another_answer}" onclick="addAnswerDialog('{$question.question_id}','normal')" /></p>
            <elseif condition="$perms['allow_answer']" />
            <p><input class="btn" type="button" value="{$Think.lang.add_answer}" onclick="addAnswerDialog('{$question.question_id}','normal')" /></p>
            <elseif condition="$_user['user_group'] eq 6" />
            <p>{$Think.lang.answer_require_login}</p>
            </if>
  
            <notempty name="answers">
            <div class="bd">
                <ul class="answers">
                    <volist name="answers" id="vo">
                    <li id="answer-{$vo.answer_id}" class="item">
                    	<!-- begin of profile card -->
                    	<eq name="vo.is_teamwork" value="0">
                        <div id="user-{$vo.poster_id}" class="profile">
                            <eq name="question.status" value="2">
                            <h3>{$Think.lang.answerer} {$key+1}</h3>
                            <else/>
                            <a href="{$vo.poster_id|format_user_url=$vo['poster_name']}"><img class="avatar" src="{$vo.email|get_avatar}" alt="{$vo.poster_name}" /></a>
                            <span class="name"><a href="{$vo.poster_id|format_user_url=$vo['poster_name']}">{$vo.poster_name}</a></span>
                            </eq>
                            <div class="profile-card"></div>
                        </div>
                        <else/>
                        <div id="team-{$vo.team_id}" class="profile">
                            <eq name="question.status" value="2">
                            <h3>{$Think.lang.answerer} {$key+1}</h3>
                            <else/>
                            <a href="{$vo.team_id|format_team_url=$vo['team_name']}"><img class="avatar" src="{$vo.team_id|get_team_logo}" alt="{$vo.team_name}" /></a>
                            <span class="name"><a href="{$vo.team_id|format_team_url=$vo['team_name']}">{$vo.team_name}</a></span>
                            </eq>
                            <div class="profile-card"></div>
                        </div>
                        </eq>
                        <!-- end of profile card -->
                        <eq name="vo.is_hidden" value="1">
	                    <p class="low-rating"><span>{$Think.lang.answer_hidden}</span> - <span><a href="javascript:void(0)" onclick="lowRatingToggle(this,'{$vo.answer_id}')">{$Think.lang.show}</a></span></p>
	                    </eq>
                        <div id="qa-container-{$vo.answer_id}" class="qa-container" <eq name="vo.is_hidden" value="1">style="display:none;"</eq>>
                            <eq name="vo.is_best" value="1">
                            <h2 class="best-answer"><span>{$Think.lang.best_answer}</span> - <empty name="vo.vote_count">{$Think.lang.chosen_by_asker}<else/>{$Think.lang.chosen_by_voters}</empty></h2>
                            </eq>
                            <div class="content">{$vo.details|parse_markup=$vo['markup_mode']}</div>
                            <if condition="$vo['last_editor_id'] AND $_global['display_last_edited']">
		                    <ul class="meta">
		                    	<li>{$Think.lang.edited_by} <a href="{$vo.last_editor_id|format_user_url=$vo['last_editor_name']}">{$vo.last_editor_name}</a></li>
		                        <li> - <abbr title="{$vo.last_edit_time|format_date}">{$vo.last_edit_time|pretty_date}</abbr></li>
		                    </ul>
		                    </if>
                            <ul class="meta">
                            <neq name="question.status" value="2">
                            	<eq name="vo.is_teamwork" value="0">
                            	<li>{$Think.lang.answered_by} <a href="{$vo.user_id|format_user_url=$vo['poster_name']}">{$vo.poster_name}</a></span></li>
                                <else/>
                                <li>{$Think.lang.answered_by_team} <a href="{$vo.team_id|format_team_url=$vo['team_name']}">{$vo.team_name}</a></span></li>
                            	</eq> - 
                            </neq>
                            	<li> <abbr title="{$vo.create_time|format_date}">{$vo.create_time|pretty_date}</abbr></li>
                                <if condition="$vo['allow_edit_answer'] OR $perms['admin_edit_answer']">
                                <li> - <a href="javascript:void(0)" onclick="editAnswerDialog('{$vo.answer_id}','{$vo.is_teamwork}')">{$Think.lang.edit}</a></li>
                                </if>
                                <if condition="$vo['allow_delete_answer'] OR $perms['admin_delete_answer']">
                                <li> - <a href="javascript:void(0)" onclick="delAnswerDialog('{$vo.answer_id}')">{$Think.lang.delete}</a></li>
                                </if>
                                <eq name="vo.allow_report_answer" value="1">
                                <li class="report-abuse"> - <a href="javascript:void(0)" onclick="reportDialog('{$vo.answer_id}','A')">{$Think.lang.report_abuse}</a></li>
                                </eq>
                                <eq name="_global.comment_on_answer_enable" value="1">
                                <li class="answer-comment"><a href="javascript:void(0)" onclick="loadComments('{$vo.answer_id}','A')">{$Think.lang.comment_count}({$vo.comment_count})</a></li>
                                </eq>
                            </ul>
                            <eq name="perms.allow_choose_answer" value="1">
                            <p><input type="button" class="btn" value="{$Think.lang.choose_as_best_answer}" onclick="chooseBestAnswerDialog('{$vo.answer_id}');" /></p>
                            </eq>
                            <eq name="vo.allow_vote_answer" value="1">
                            <p><input type="button" class="btn" value="{$Think.lang.vote_as_best_answer}" onclick="voteBestAnswer('{$question.question_id}','{$vo.answer_id}');" /></p>
                            <else/>
                                <if condition="($question['status'] eq 2) OR ($question['vote_count'] gt 0)">
                                <div class="vote-count" style="padding-left:{:2*get_percentage($vo['vote_count'],$question['vote_count'])}px;"><strong><em>{:get_percentage($vo['vote_count'],$question['vote_count'])}%</em><span>{$vo.vote_count}</span>{$Think.lang.vote_count}</strong></div>
                                </if>
                            </eq>
                            <eq name="vo.allow_rate_answer" value="1">
                            <div class="utils-container">
                                <ul id="rate-{$vo.answer_id}" class="rate">
                                    <li class="up" onclick="rateAnswer(this,'{$vo.answer_id}','up')"><span>{$vo.up_rate_count}</span></li>
                                    <li class="down" onclick="rateAnswer(this,'{$vo.answer_id}','down')"><span>{$vo.down_rate_count}</span></li>
                                </ul>
                            </div>
                            </eq>
                            <if condition="$vo['is_best'] AND ($question['status'] eq 3) AND $question['feedback']">
                            <div class="answer-rating">
                                <h2>{$Think.lang.asker_rating}<span id="answer-stars" class="stars"></span></h2>
                                <p class="desc">{$question.feedback.details}</p>
                            </div>
                            </if>
                            <if condition="$vo['is_best'] AND $perms['allow_improve_answer']">
                                <p><input class="btn" type="button" value="{$Think.lang.improve_answer}" onclick="addAnswerDialog('{$question.question_id}','improve')" /></p>
                            </if>
                        </div>
                    </li>
                    <!-- comment container -->
                    <li id="a-comments-{$vo.answer_id}" class="item a-comments"></li>
                    </volist>
                </ul>
            </div>
            
            <!-- begin of voting for no best answer -->
            <if condition="($question['status'] eq 2) OR ($question['no_best_vote_count'] gt 0)">
            <div id="qan-no-best-answer">
                <eq name="perms.allow_vote" value="1">
                <h4>{$Think.lang.no_best_answer_tips_1}</h4>
                <p>{$Think.lang.no_best_answer_tips_2}</p>
                <p><input type="button" class="btn" onclick="voteNoBestAnswer('{$question.question_id}')" value="{$Think.lang.no_best_answer}" /></p>
                </eq>
                <gt name="question.no_best_vote_count" value="0">
                <h4>{$Think.lang.no_best_answer}</h4>
                <div class="vote-count" style="padding-left:{:get_percentage(2*$question['no_best_vote_count'],$question['vote_count'])}px;"><strong><em>{:get_percentage($question['no_best_vote_count'],$question['vote_count'])}%</em><span>{$question.no_best_vote_count}</span>{$Think.lang.vote_count}</strong></div>
                </gt>
            </div>
            </if>
            <div class="pagination">{$pagination}</div>
            </notempty>
        </div>
        <!-- end of answers -->
        <!-- related questions widget-->
        {:W('RelatedQuestions',array('qid'=>$question['question_id'],'title'=>$question['title']))}
    </div>
    <!-- end of content -->
    <div id="qan-sidebar">
        <!-- my status widget -->
        {:W('MyStatus',array('_user'=>$_user))}
        <!-- sidebar top ad -->
        <div id="ad-question-sidebar-top">{ad:question_sidebar_top}</div>
        <!-- categories widget -->
        {:W('Categories',array('cid'=>$question['category_id']))}
        <!-- like this page -->
        <div id="qan-persistent-links" class="mod">
            <h2>{$Think.lang.user_like_page}</h2>
            <ul class="syndication-links">
                <li class="rss"><a href="{:U('Feed/question',array('qid'=>$question['question_id']))}">{$Think.lang.rss}</a></li>
                <li class="invite"><a href="{:U('Invitation/inviteFriend',array('uid'=>$_user['user_id']))}">{$Think.lang.invite_friends}</a></li>
            </ul>
            <!-- add this widget -->
            {:W('AddThis')}
        </div>
        <!-- sidebar bottom ad -->
        <div id="ad-question-sidebar-bottom">{ad:question_sidebar_bottom}</div>
    </div>
</div>

<include file="Public:footer" />

<load href="__PUBLIC__/Js/jquery.artTxtCount.js" />
<script type="text/javascript">
$(function(){

    $('#edit-question').mouseDelay().hover(
        function(){
            $('#edit-question-menu').show();
        },
        function(){
            $('#edit-question-menu').hide();
        }
    );

    <neq name="question.status" value="2">
    $('.profile').hover(
        function(){
        	var curDiv = $(this).attr('id');
        	var type = curDiv.indexOf('user-') != -1 ? 'user' : 'team';
        	if(type == 'user'){
        		var id = curDiv.substring(5);
        		var data = {uid: id};
        		var url = APP + '/Ajax/loadUserProfile';
        	}else{
        		var id = curDiv.substring(5);
        		var data = {tid: id};
        		var url = APP + '/Ajax/loadTeamProfile';
        	}
            var div = $(this).find('.profile-card');
            var target = $(this).find('.profile-card>.card-container');
            var loading = '<div class="loading">loading...</div>';
            if(target.length == 0){
                div.append(loading);
                $.post(url, data, function(html){
                    div.find('.loading').remove();
                    div.append(html);
                });
            }
            div.show();
        },
        function(){
            var div = $(this).find('.profile-card');
            div.find('.loading').remove();
            div.hide();
        }
    );
    </neq>

});

function loadComments(id, type){
    var url = APP + '/Ajax/loadComments/id/'+ id + '/type/'+ type;
    if(type == 'Q'){
        var container = $('#q-comments');
    }else if(type == 'A'){
        var container = $('#a-comments-' + id);
    }
    if(container.find('.comments').length > 0){
        container.slideToggle();
        return;
    }
    $.post(url, function(html){
        container.html(html).slideToggle();
    });
}

function lowRatingToggle(obj, id){
	var showText = '{$Think.lang.show}';
	var hideText = '{$Think.lang.hide}';
	var div = $('#qa-container-'+id);
	div.toggle();
	if(div.css('display') == 'none'){
		$(obj).text(showText);
	}else{
		$(obj).text(hideText);
	}
}

</script>

<eq name="question.status" value="3">
<load href="__PUBLIC__/Js/raty/js/jquery.raty.min.js" />
<script type="text/javascript">
$(function(){
    var path = '__PUBLIC__/Js/raty/img/';
    var start = '{$question.feedback.star_level}';
    start = start ? start : 5;
    $('#answer-stars').raty({
        path: path,
        readOnly: true,
        start: start
    });
});
</script>
</eq>
